<template>
  <el-container
    :key="forceRefreshKey"
    :class="{
      collapsed: isCollapse,
    }"
  >
    <sider-menu :menu-data="menuData" :collapse="isCollapse" />
    <el-container class="page-content">
      <el-header height="64">
        <global-header @onCollapse="onCollapse" />
      </el-header>
      <page-header />
      <el-main
        ref="mainContainer"
        :class="{
          np: $route.name === 'logs',
          'main-container': true,
        }"
      >
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      isCollapse: false,
      time: 0,
    };
  },

  computed: {
    ...mapState(['forceRefreshKey', 'menuData']),
  },
  created() {},
  methods: {
    onCollapse(isCollapse) {
      this.isCollapse = isCollapse;
    },
  },
};
</script>
<style lang="less" scoped>
.el-header {
  padding: 0;
}
.el-container {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #f0f2f5;
}
.el-main.np {
  padding: 0;
}
</style>
